<script setup>
import { ref, watch, onMounted } from 'vue'
import { getKnowledgePageAPI } from '@/apis/knowledge'

const knowledgeList = ref([])
const page = ref({
    current: 1,
    pageSize: 10,
    total: 100
})

watch(
    () => page.value.current,
    (newVal) => {
        getPage(newVal)
    }
)

const getPage = async (pageNum) => {
    const res = await getKnowledgePageAPI({ page: pageNum })
    // console.log(res)
    if (res.code === 2000) {
        knowledgeList.value = res.data.records
        page.value.total = res.data.total
    }
}

onMounted(() => {
    getPage(1)
})

let sortType = [
    "默认",
    "发布时间",
    "评论数量",
    "点赞数量",
    "收藏数量"
]
let categoryList = [
    "全部", "禽畜养殖", "水果种植", "种子种苗",
    "蔬菜种植", "农机", "苗木花草种植", "中药材种植",
    "水产养殖", "经济作物种植", "蔬菜储藏加工", "水果储藏加工",
    "其他储藏加工", "其他养殖" 
]
</script>

<template>
<div class="knowledge-page">
    <div class="page-header">
        <div class="category page-header-box">
            <div class="box-title">排序方式</div>
            <div class="box-content">
                <a href="#" v-for="(type, i) in sortType" :key="i" :class="{active: i === 0}">{{ type }}</a>
            </div>
        </div>
        <div class="sort page-header-box">
            <div class="box-title">分类</div>
            <div class="box-content">
                <a href="#" v-for="(category, i) in categoryList" :key="i" :class="{active: i === 0}">{{ category }}</a>
            </div>
        </div>
    </div>
    <div class="knowledge-list">
        <div class="knowledge-card" v-for="knowledge in knowledgeList" :key="knowledge.id">
            <RouterLink :to="`/knowledgeDetail/${knowledge.id}`">
                <div class="card-l"><img :src="knowledge.pic" alt=""></div>
                <div class="card-r">
                    <div class="title">{{ knowledge.title }}</div>
                    <div class="content">{{ knowledge.content }}</div>
                    <div class="info">
                        <span>{{ knowledge.author?.realName }}</span>
                        <span>{{ knowledge.updateTime.split(' ')[0] }}</span>
                    </div>
                </div>
            </RouterLink>
        </div>
    </div>
    <div class="pagination">
        <el-pagination 
            background 
            layout="prev, pager, next" 
            v-model:page-size="page.pageSize"
            v-model:current-page="page.current"
            :total="page.total" 
        />
    </div>
</div>
</template>

<style scoped lang='scss'>
.knowledge-page {
    width: 1280px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;

    .page-header {
        width: 100%;

        .page-header-box {
            display: flex;
            width: 100%;
            min-height: 40px;
            margin-bottom: 20px;
            border-bottom: 1px dashed #d8d8d8;

            .box-title {
                height: 100%;
                width: 90px;
                padding-top: 3px;
            }

            .box-content {
                width: 1150px;
                display: flex;
                flex-wrap: wrap;
                
                >a {
                    font-size: 14px;
                    display: block;
                    padding: 5px 20px;
                    margin-bottom: 10px;

                    &:hover {
                        color: #39bf3e;
                    }
                }

                .active {
                    color: #fff;
                    background-color: #39bf3e;

                    &:hover {
                        color: #fff;
                    }
                }
            }
        }
    }

    .knowledge-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        min-height: 400px;

        .knowledge-card {
            width: 48%;
            height: 140px;
            padding: 10px;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #d8d8d8;

            &:hover  {
                img {
                    transform: scale(1.05);
                }

                .content {
                    color: #999;
                }
            }

            >a {
                display: flex;
                justify-content: space-between;
                height: 100%;
                width: 100%;

                .card-l {
                    width: 180px;
                    height: 100%;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        transition: all .3s;
                    }
                }
                .card-r {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    width: 375px;
                    height: 100%;

                    .title {
                        width: 100%;
                        height: 25px;
                        margin-bottom: 5px;
                        font-size: 18px;
                        font-weight: bold;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .content {
                        width: 100%;
                        height: 57px;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 3; /* 限制显示行数 */
                        -webkit-box-orient: vertical;
                    }

                    .info {
                        display: flex;
                        justify-content: space-between;

                        span {
                            color: #999;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
    }
}
</style>
